<template>
  <div class="settle-container">
    <div class="login-container">
      <h3 class="login-title">入驻申请</h3>
      <el-form :model="loginForm" :rules="rules" ref="loginFormRef" label-width="100px">
        <!-- 入住类型选择 -->
        <el-form-item prop="type" label="入驻类型">
          <el-select v-model="loginForm.type" placeholder="请选择入住类型" class="login-input">
            <el-option v-for="item in applyTypeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item prop="nickname" label="姓名">
          <el-input v-model="loginForm.nickname" placeholder="请输入姓名" class="login-input">
            <template #prefix>
              <!-- <el-icon><User /></el-icon> -->
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="loginForm.phoneNumber" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="手机验证码" prop="code">
          <el-input v-model="loginForm.code" placeholder="请输入手机验证码">
            <template #append>
              <el-button :disabled="isCounting" @click="sendCode">
                {{ isCounting ? `${countDown}秒后重试` : '获取验证码' }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item prop="agreement">
            <el-checkbox v-model="loginForm.agreement">
              阅读并接受
              <el-link type="primary" @click.stop.prevent="showUserAgreement">《用户协议》</el-link>
              和
              <el-link type="primary" @click.stop.prevent="showPrivacyPolicy">《隐私权保护声明》</el-link>
            </el-checkbox>
          </el-form-item> -->
      </el-form>
      <el-row :gutter="20">
        <el-col :span="12" :offset="6">
          <el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.prevent="submitForm">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { getCodeSms, getMerchantSettle } from './utils/settle';
import { applyTypeList } from './utils/enum';
const loginFormRef = ref(null);
const loginForm = reactive({
  type: '',
  nickname: '',
  phoneNumber: '',
  code: '',
  // agreement: false
});
const emit = defineEmits(['funcSettleSuccess'])
const rules = {
  nickname: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '姓名长度应在2-10个字符之间', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择入住类型', trigger: 'blur' }
  ],
  phoneNumber: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码应为6位', trigger: 'blur' }
  ],
  // agreement: [
  //   {
  //     validator: (rule, value, callback) => {
  //       if (!value) {
  //         callback(new Error('请阅读并同意用户协议和隐私权保护声明'))
  //       } else {
  //         callback()
  //       }
  //     },
  //     trigger: 'change'
  //   }
  // ]
};
const reallyCode = ref('')
const loading = ref(false);
const isCounting = ref(false);
const countDown = ref(60);

const userAgreementVisible = ref(false);
const privacyPolicyVisible = ref(false);

const sendCode = () => {
  if (!loginForm.phoneNumber) {
    ElMessage.error('请输入手机号');
    return;
  }
  if (!rules.phoneNumber[1].pattern.test(loginForm.phoneNumber)) {
    ElMessage.error('手机号格式不正确');
    return;
  }
  isCounting.value = true;
  const interval = setInterval(() => {
    countDown.value--;
    if (countDown.value <= 0) {
      clearInterval(interval);
      isCounting.value = false;
      countDown.value = 60;
    }
  }, 1000);
  getCodeSmsFunc()
};
const getCodeSmsFunc = async () => {
  try {
    const res = await getCodeSms(loginForm.phoneNumber)
    console.log(res, 'res1111111')
    reallyCode.value = res
    // 模拟发送验证码
    ElMessage.success('验证码发送成功，请注意查收')
  } catch (error) {
    console.log(error, 'error')
  } finally {

  }
}
const submitForm = () => {
  loginFormRef.value.validate((valid) => {
    console.log(loginForm.code, reallyCode.value, 'reallyCode.value')
    if (valid) {
      if (loginForm.code !== reallyCode.value) {
        ElMessage.error('验证码不正确');
        return;
      }
      submitMerchantSettleFunc()
    } else {
      // ElMessage.error('表单验证失败');
    }
  });
};
async function submitMerchantSettleFunc() {
  try {
    loading.value = true;
    const res = await getMerchantSettle(loginForm)
    console.log(res, 'res')
    ElMessage.success('申请入驻成功，请等待审核');
  } catch (error) {
    console.log(error, 'error')
  } finally {
    loading.value = false;
  }
}
// 重置表单
const resetForm = () => {
  if (!loginFormRef.value) return
  // 重置表单字段
  loginFormRef.value.resetFields()
  loginForm.value = {
    type: '',
    nickname: '',
    phoneNumber: '',
    code: '',
  }
  reallyCode.value = ''
}
// 显示用户协议
const showUserAgreement = () => {
  userAgreementVisible.value = true;
};

// 显示隐私政策
const showPrivacyPolicy = () => {
  privacyPolicyVisible.value = true;
};
// 获取商户入驻申请列表
const getApplyListFunc = async () => {
  try {
    const res = await getApplyList()
    console.log(res, 'res')
  } catch (error) {
    console.log(error, 'error')
  }
}
onMounted(() => {
  //getApplyListFunc()
})
</script>

<style scoped>
.login-container {
  width: 500px;
  height: 400px;
  padding: 20px;
  margin: 100px auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
}

.agreement-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #606266;
}

:deep(.el-dialog__body) {
  padding: 0;
}
</style>